html,
body {
    height: 100%;
}

body {
    margin: 0;
    
    background-color: #d9dee2;
    background-image: -moz-linear-gradient(top, #ebeef2, #d9dee2);
    background-image: -ms-linear-gradient(top, #ebeef2, #d9dee2);
    background-image: -o-linear-gradient(top, #ebeef2, #d9dee2);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ebeef2), to(#d9dee2));
    background-image: -webkit-linear-gradient(top, #ebeef2, #d9dee2);
    background-image: linear-gradient(top, #ebeef2, #d9dee2);
    
    font: 12px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica;
}



/**** Headers ****/

h1, h2 {
	position: relative;
	
	color: #666;
	text-align: center;
}

h1 {
    margin: 0 0 25px 0;
    
    text-transform: uppercase;
    letter-spacing: 2px;
    font: bold 24px/1 myriadpro;
}

h2 {
	margin: 10px 0 20px 0;
	
	font: bold 20px/1 myriadpro;
}



/**** Forms ****/

fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}

label {
    margin: 0 0 0 2px;
}

input[type="text"],
input[type="password"] {
    margin: 0 0 10px 0;
	padding-left: 34px;
    width: 353px;
    
    background-position: 9px center;
	background-size: 18px 18px;
	background-repeat: no-repeat;
}

#inputs {
    margin: 30px 0 30px 0;
}

#actions {
    margin: 30px 0 0 0;
}

#error-messages {
    margin: 0;
    position: absolute;
    bottom: 74px;
}

/* Form inputs kinds. */

.username-input {
   	background-image: url(/img/icons/user.png);
}

.password-input {
    background-image: url(/img/icons/key.png);
}

.room-input {
    /* "-input" in the name added, because there is another class
     * with "room" in it's name (.room-button in login.css). */
	background-image: url(/img/icons/house.png);
}

.email-input {
	background-image: url(/img/icons/mail.png);
}

.info-input {
	background-image: url(/img/icons/info.png);
}

.date-input {
	background-image: url(/img/icons/calendar.png);
}

.field {
	padding: 10px 10px 10px 10px;
	
	border: 1px solid #ccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    
    -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
    -webkit-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
    box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
}

.field:focus {
    outline: none;
    border-color: #e8c291;
    
    background-color: #fff;
    -webkit-box-shadow: 0 0 0 1px #e8c291 inset;
    -moz-box-shadow: 0 0 0 1px #e8c291 inset;
    box-shadow: 0 0 0 1px #e8c291 inset;
}



/**** Box ****/

/* Top box that is placed on the top of the page. */
.top-box {
    position: relative;
    top: 80px;
}

.standard-width {
    /* Width so that inputs will fit just right.
     * 399 = 353 (width) + 34 (padding) + 10 (margin) + 2x1(border) */
    width: 399px;
}

.box {
    position: relative;
    z-index: 0;
    padding: 25px 25px;
    
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    
    background-color: #fff;
    background-image: -moz-linear-gradient(top, #fff, #eee);
    background-image: -ms-linear-gradient(top, #fff, #eee);
    background-image: -o-linear-gradient(top, #fff, #eee);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
    background-image: -webkit-linear-gradient(top, #fff, #eee);
    background-image: linear-gradient(top, #fff, #eee);

    /* Shadow */
    -webkit-box-shadow:
          0 0 2px rgba(0, 0, 0, 0.2),
          1px 1px 1px rgba(0, 0, 0, .2),
          2px 2px 0 #fff,
          3px 3px 0 rgba(0, 0, 0, .2),
          4px 4px 0 #fff,
          5px 5px 0 rgba(0, 0, 0, .2);
    -moz-box-shadow:
          0 0 2px rgba(0, 0, 0, 0.2),
          1px 1px   0 rgba(0,   0,   0,   .1),
          2px 2px   0 rgba(255, 255, 255, 1),
          3px 3px   0 rgba(0,   0,   0,   .1),
          4px 4px   0 rgba(255, 255, 255, 1),
          5px 5px   0 rgba(0,   0,   0,   .1);
    box-shadow:
          0 0 2px rgba(0, 0, 0, 0.2),
          1px 1px 1px rgba(0, 0, 0, .2),
          2px 2px 0 #fff,
          3px 3px 0 rgba(0, 0, 0, .2),
          4px 4px 0 #fff,
          5px 5px 0 rgba(0, 0, 0, .2);
}

.inside-bordered:before {
    /* Inside border */
    position: absolute;
    top: 5px;
    right: 5px;
	bottom: 5px;
    left: 5px;
    z-index: -1;
    
	border: 1px dashed #ccc;
	
    -webkit-box-shadow: 0 0 0 1px #fff;
	-moz-box-shadow: 0 0 0 1px #fff;
    box-shadow: 0 0 0 1px #fff;
    
    content: '';
}

/* Message that's the only content of the box. */
#message {
    margin: 50px 0 50px 0;
}



/*** Button ***/

a.button {
    /* Height and width -1px from each side out of normal .button size. */
    width: 118px;
    height: 33px;
    
    color: #8f5a0a !important;
    text-decoration: none !important;
}

.button {
    padding: 0;
    width: 120px;
    height: 35px;
    
    border-width: 1px;
    border-style: solid;
    border-color: #d69e31 #e3a037 #d5982d #e3a037;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    
	background-color: #ffb94b;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fddb6f), to(#ffb94b));
    background-image: -webkit-linear-gradient(top, #fddb6f, #ffb94b);
    background-image: -moz-linear-gradient(top, #fddb6f, #ffb94b);
    background-image: -ms-linear-gradient(top, #fddb6f, #ffb94b);
    background-image: -o-linear-gradient(top, #fddb6f, #ffb94b);
    background-image: linear-gradient(top, #fddb6f, #ffb94b);
	-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
	-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
    
    color: #8f5a0a;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    font: bold 15px Arial, Helvetica;
    cursor: pointer;
}

.button:hover,
.button:focus {		
    background-color: #fddb6f;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffb94b), to(#fddb6f));
    background-image: -webkit-linear-gradient(top, #ffb94b, #fddb6f);
    background-image: -moz-linear-gradient(top, #ffb94b, #fddb6f);
    background-image: -ms-linear-gradient(top, #ffb94b, #fddb6f);
    background-image: -o-linear-gradient(top, #ffb94b, #fddb6f);
    background-image: linear-gradient(top, #ffb94b, #fddb6f);
}	

.button:active {		
    outline: none;
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}

.button::-moz-focus-inner {
	border: none;
}

a.button,
div.button {
    line-height: 35px;
}



/**** Chat messages ****/

.message-username {
    color: #18191A;
    font-weight: bolder;
}



/**** Positioning ****/

div.centered,
.button.centered {
    display: block;
	margin-left: auto;
	margin-right: auto;
}

p.centered {
    text-align: center;
}

.centered-vertically {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.left {
    float: left;
}

.right {
    float: right;
}

.error {
	color:red;
}



/**** Myriadpro font. ****/

@font-face {
	font-family: myriadpro;
	font-weight: bold;
	src: url("/css/myriad-pro-font/myriadpro-bold.otf") format("opentype");
}

@font-face {
	font-family: myriadpro;
	font-weight: normal;
	src: url("/css/myriad-pro-font/myriadpro-regular.otf") format("opentype");
}